<template stype = "    margin: 0;">
  <div id="comment-manage">
    <div style="margin-inline: 25px;">
      <h2 style="float:left;">评价</h2>
      <el-select
        v-model="articleId"
        style="float:left;margin:20px;height:100%"
        filterable
        :placeholder="文章"
      >
        <el-option
          v-for="each in articles"
          :key="each.id"
          :label="each.articleName"
          :value="each.id"
        ></el-option>
      </el-select>
      <el-button
        @click="select"
        style="float:right;margin:20px;height:100%"
        icon="el-icon-circle-plus"
        type="primary"
      >查找</el-button>
      <el-divider style="margin-top: 10px;"></el-divider>
    </div>
    <div style="margin-inline: 25px;">
      <el-table :data="tableData" style="width: 100%" height="450">
          <el-table-column prop="articleName" label="文章名称" show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="commentContent" label="评价内容" show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="score" label="分数" width="180"></el-table-column>
        <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detailOne(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页面分页栏 -->
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        @current-change="currentChange"
        @prev-click="prev"
        @next-click="next"
        :page-size="10"
        width="100"
        align="center"
      ></el-pagination>
    </div>
    <el-dialog
      v-dialogDrag
      :visible.sync="visible"
      width="80%"
      append-to-body
      center
      title="评论"
    >
      <textarea placeholder="评论" id="comment" v-model="comment" disabled></textarea>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageOn: 1,
      total: 0,
      articles: [],
      articleId: "",
      visible:false,
      comment:"",
    };
  },
  methods: {
    select() {
        this.pageOn = 1;
        this.getPage();
    },
    detailOne(row) {
        this.visible = true;
        this.comment = row.commentContent;
    },
    getPage() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "commentsOperation/getPage",
        { pageOn: this.pageOn, pageSize: 10, data: { articleId: this.articleId } },
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
            this.total = result.total;
          }
        },
        (result) => {}
      );
    },
    // 点击上一页调用
    prev(val) {
      this.pageOn = this.pageOn - 1;
      this.getPage();
    },
    // 点击下一页调用
    next(val) {
      this.pageOn = this.pageOn + 1;
      this.getPage();
    },
    // 当前页码修改时调用
    currentChange(val) {
      this.pageOn = val;
      this.getPage();
    },

    getArticle() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "articleOperation/selectList",
        { authorId: user.id },
        (result) => {
          if (result.result === "SUCCESS") {
            this.articles = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  mounted() {
    this.getPage();
    this.getArticle();
  },
};
</script>

<style>
#comment-manage {
  height: 100%;
  width: 100%;
  margin: 0;
}
#comment {
  scrollbar-face-color: #ff80ff;
  border: 1px solid gainsboro;
  overflow: auto;
  width: 95%;
  height: 10%;
  margin: auto;
  outline: none;
  font-size: 18px;
}
</style>